<div [ngClass]="{'dark-theme': isDarkTheme | async}" class="mat-dialog-inner-container mat-app-background">

    <h2 mat-dialog-title>
        {{torrent.name}}
        <p></p>
        <mat-chip-list id="torrent-info-chip-list">
            <mat-chip color="primary" selected>{{state()}}</mat-chip>
            <mat-chip *ngIf="torrent.force_start" color="accent" selected>Forced Start</mat-chip>
        </mat-chip-list>
    </h2>

    <mat-dialog-content class="mat-typography torrent-info-container">
        <mat-tab-group mat-align-tabs="start">

            <mat-tab label="General">
                <div class="torrent-info-general-content">
                    <div class="leftPanel">
                        <p><b>Name:</b> {{torrent.name}}</p>
                        <p><b>Total Size:</b> {{total_size()}}</p>
                        <p><b>Downloaded:</b> {{downloaded()}} / {{total_size()}}</p>
                        <p><b>Uploaded:</b> {{uploaded()}}</p>
                        <p><b>Ratio:</b> {{ratio()}}</p>
                    </div>

                    <div class="rightPanel">
                        <p><b>Added On:</b> {{added_on()}}</p>
                        <p><b>Completed On:</b> {{completed_on()}}</p>
                        <p><b>Last Activity:</b> {{last_activity()}}</p>
                        <p><b>Save Location:</b> {{torrent.save_path}}</p>
                    </div>

                </div>
            </mat-tab>

            <mat-tab>
              <ng-template matTabLabel>
                <span matBadge="{{isLoading ? '—' : torrentContents.length}}" matBadgeColor="accent" matBadgeOverlap="false">Files</span>
              </ng-template>
                <div class="torrent-info-content-content">
                  <app-file-system-tree-explorer
                      *ngIf="!isLoading"
                      [showProgress]="true"
                      [directories]="get_content_directories_as_advanced_nodes()"></app-file-system-tree-explorer>

                  <mat-spinner *ngIf="isLoading"></mat-spinner>
                </div>
            </mat-tab>

        </mat-tab-group>

    </mat-dialog-content>

    <mat-dialog-actions align="end">
    <button mat-button [mat-dialog-close]="true">Close</button>
    </mat-dialog-actions>

</div>
